<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在线画板</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<style>
			*{
				padding:0;
				margin:0;	
			}
			body{
				border:1px solid transparent;
				width:100%;
				height:100%;
				box-sizing: border-box;
				background:lightgray;
				overflow: hidden;
			}
			.warp{
				width:1200px;
				height:700px;
				border:5px solid black;
				margin: 50px auto;
			}
			.header{
				height:100px;
				border-bottom: 2px solid black;
				background:#F7F7F7;
			}
			.header .header-btn{
				padding:5px;
				color:black;
			}
			.header .header-btn:hover{
				background: rgba(0,0,0,.3);
				color:white;
				transition: .1s;
			}
			.header-part>li{
				float:left;
				width:20%;
				height:100px;
				border-right:2px solid white;
				box-sizing: border-box;
			}
			.header-part>li:nth-child(5){
				border:none;
			}
			.header-part h3{
				text-align: center;
				line-height:28px;
			}
			.part-list-img li{
				text-align: center;
				margin-top: 10px;
			}
			.part-list-tool>li,.part-list-tool-2>li{
				width:45px;
				height:65px;
				float: left;
				font-size: 12px;
				text-align: center;
				line-height:65px;
			}
			.part-list-tool-2>li{
				width:58px;
			}
			p{
				text-align: center;
				line-height:68px;
			}
			.part-list-color li{
				float: left;
				width:20px;
				height:20px;
				border:5px solid transparent;
				margin:0 5px;
				margin-top:15px;
			}
			.part-list-color li:nth-child(1){
				background: red;
			}
			.part-list-color li:nth-child(2){
				background: blue;
			}
			.part-list-color li:nth-child(3){
				background: green;
			}
			.part-list-color li:nth-child(4){
				background: brown;
			}
			.part-list-color li:nth-child(5){
				background: yellow;
			}
			.part-list-color li:nth-child(6){
				background: pink;
			}
			.part-list-color li a{
				display: inline-block;
				width:18px;
				height:18px;
			}
			.main{
				background: white;
				width:100%;
				height:598px;
			}
			.active-btn{
				border:1px solid black;
			}
			.main :hover{
				cursor:crosshair;
			}
		</style>
	</head>
	
	<body>
		<div class="warp">
			<div class="header">
				<ul class="header-part clearfix">
					<li>
						<h3>图像</h3>
						<hr />
						<ul class="part-list-img">
							<li>
								<a id="save-img"  class="header-btn active-btn" href="javascript:;">保存图片</a>
							</li>
							<li>
								<a id="clear-img" class="header-btn" href="javascript:;">清除画布</a>
							</li>
						</ul>
					</li>
					<li>
						<h3>工具</h3>
						<hr />
						<ul class="part-list-tool clearfix">
							<li>
								<a id="tool-pen" class="header-btn" href="javascript:;"><i class="iconfont icon-huabi"></i></a>
							</li>
							<li>
								<a id="tool-eraser" class="header-btn" href="javascript:;"><i class="iconfont icon-xiangpi"></i></a>
							</li>
							<li>
								<a id="tool-brush" class="header-btn" href="javascript:;"><i class="iconfont icon-youqishua"></i></a>
							</li>
							<li>
								<a id="tool-magnifier" class="header-btn" href="javascript:;"><i class="iconfont icon-fangdajing-copy"></i></a>
							</li>
							<li>
								<a id="tool-text" class="header-btn" href="javascript:;"><i class="iconfont icon-wenben"></i></a>
							</li>
						</ul>
					</li>
					<li>
						<h3>形状</h3>
						<hr />
						<ul class="part-list-tool-2 clearfix">
							<li>
								<a id="shape-react" class="header-btn" href="javascript:;"><i class="iconfont icon-juxing"></i></a>
							</li>
							<li>
								<a id="shape-circle" class="header-btn" href="javascript:;"><i class="iconfont icon-yuan"></i></a>
							</li>
							<li>
								<a id="shape-triangle" class="header-btn" href="javascript:;"><i class="iconfont icon-kongxinsanjiao-second"></i></a>
							</li>
							<li>
								<a id="shape-line" class="header-btn" href="javascript:;"><i class="iconfont icon-hengxian2"></i></a>
							</li>
						</ul>
					</li>
					<li>
						<h3>线框</h3>
						<hr />
						<p>功能暂未开放</p>
					</li>
					<li>
						<h3>颜色</h3>
						<hr />
						<ul id="color-list" class="part-list-color clearfix">
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</li>
				</ul>		
			</div>
			<div class="main">
				<canvas id="canvas" width="1200" height="598"></canvas>	
			</div>
			<div class="footer">
				
			</div>
		</div>	
		<script src="js/canvas.js"></script>
	</body>
</html>
